<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="./../home.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui">
    <ui:define name="content">
        <h:outputScript library="js" name="calendar.js"/>
        <h:form id="evento">
            <div class="col-lg-12">
                <h3 class="page-header" id="h3evento">
                    Gestionar eventos
                </h3>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <p:dataTable id="eventF" value="#{eventoBean.lstEventoFrecuente}" rendered="false"
                                         style="font-size: 13px;" var="list" emptyMessage="No hay ningun evento" rowIndexVar="rowIndex">  
                                <p:column headerText="#">
                                    <h:outputText value="#{rowIndex+1}" />
                                </p:column>
                                <p:column headerText="Nombre">
                                    <h:outputText value="#{list.nombre}" />
                                </p:column>
                                <p:column headerText="Tipo Evento">
                                    <h:outputText value="#{eventoBean.devolverDescripcionEvento(list.idTipo)}" />
                                </p:column>
                                <p:column headerText="">
                                    <p:commandButton icon="icon-choice"  style="font-size: 12px;" 
                                                     actionListener="#{eventoBean.capturarEventoFrecuente(list)}" />
                                </p:column>
                            </p:dataTable>                            
                            <f:event type="preRenderView" listener="#{eventoBean.init}" />
                            <p:schedule id="schedule" value="#{eventoBean.eventModel}" widgetVar="myschedule"
                                        view="agendaWeek" style="width: 100%" locale="es"
                                        draggable="true" allDaySlot="false" firstHour="9"
                                        slotMinutes="30" resizable="true">
                                <p:ajax event="dateSelect" listener="#{eventoBean.onDateSelect}"
                                        update=":evento:idEvent"/>
                                <p:ajax event="eventSelect" listener="#{eventoBean.onEventSelect}"
                                        update=":evento:idEvent" oncomplete="eventDialog.show()"/>
                                <!--<p:ajax event="eventMove" listener="#{eventoBean.onEventMove}"/>
                                <p:ajax event="eventResize" listener="#{eventoBean.onEventResize}"/>-->
                            </p:schedule>
                        </div>
                    </div>
                </div>
            </div>
            <p:dialog widgetVar="eventDialog" id="idEvent" header="Programacion de Evento" showEffect="clip"
                      hideEffect="clip" resizable="false" position="center">
                <h:messages globalOnly="true" styleClass="list-group" id="messa"
                            infoClass="list-group-item list-group-item-success"
                            errorClass="list-group-item list-group-item-danger"
                            />
                <p:panelGrid columns="2" id="gridEve">
                    <div class="form-group has-feedback" >
                        <label for="des" class="col-sm-3 control-label">Nombre</label>
                        <div class="col-sm-5">
                            <p:inputText styleClass="form-control" id="des" value="#{eventoBean.event.title}" maxlength="80"
                                         disabled="#{eventoBean.modificar}"/>
                        </div>						
                    </div>
                    <div class="form-group has-feedback"> 
                        <label for="tipo" class="col-sm-5 control-label" style="text-align: right;">Tipo</label>
                        <div class="col-sm-5">
                            <h:selectOneMenu id="rol" value="#{eventoBean.tipoEvento.idTipoEvento}" styleClass="form-control" 
                                             disabled="#{eventoBean.modificar}">
                                <f:selectItem noSelectionOption="true" itemLabel="Seleccionar" itemValue="0" />
                                <f:selectItems value="#{eventoBean.lstTipoEventos}" var="list" itemLabel="#{list.descripcion}" itemValue="#{list.idTipoEvento}" />
                            </h:selectOneMenu>
                        </div>
                    </div>                    
                    <div class="form-group has-feedback"> 
                        <label for="ubic" class="col-sm-5 control-label" style="text-align: right;">Lugar</label>
                        <div class="col-sm-5">
                            <p:inputText styleClass="form-control" id="ubi" value="#{eventoBean.ubicacion}" maxlength="80"
                                         disabled="#{eventoBean.modificar}"/>
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label for="start" class="col-sm-3 control-label">Inicio</label>
                        <div class="col-sm-5">
                            <p:calendar id="start" pattern="dd/MM/yyyy hh:mm a" readonlyInput="true" locale="es" 
                                        value="#{eventoBean.event.startDate}" disabled="#{eventoBean.modificar}"/>
                        </div>						
                    </div>
                    <div class="form-group has-feedback">
                        <label for="end" class="col-sm-3 control-label">Fin</label>
                        <div class="col-sm-5">
                            <p:calendar id="end" pattern="dd/MM/yyyy hh:mm a" readonlyInput="true" locale="es" 
                                        value="#{eventoBean.event.endDate}" disabled="#{eventoBean.modificar}"/>
                        </div>						
                    </div>
                    <div class="form-group has-feedback"> 
                        <label for="asig" class="col-sm-5 control-label" style="text-align: right;">Sereno(s)</label>
                        <div class="col-sm-5">
                            <p:commandButton value="Asignar" actionListener="#{eventoBean.fechaValida_aux}" 
                                             update=":evento:messa, :evento:selecc:asig, :evento:selecc:asig2, :evento:asig3"/>
                        </div>
                    </div>
                    <p:panelGrid columns="2" rendered="#{!eventoBean.modificar}">
                        <p:commandButton id="addButton" value="Aceptar" actionListener="#{eventoBean.agregarEvento}" update=":evento:messa"
                                         oncomplete="myschedule.update()" />
                        <p:commandButton id="addCancel" value="Eliminar" oncomplete="dlgEl.show();" rendered="#{eventoBean.event.id != null}"/>
                    </p:panelGrid>        
                </p:panelGrid>
            </p:dialog>
            <p:dialog widgetVar="serenoDialog" id="idSerenos" header="Asignar Sereno" showEffect="clip"
                      hideEffect="clip" resizable="false" position="center">
                <h:form id="selecc">
                    <h3>Asignados</h3>  
                    <p:dataTable id="asig" value="#{eventoBean.serenosAsignados}" style="font-size: 13px;" var="list" 
                                 emptyMessage="No hay asignacion" rowIndexVar="rowIndex">  
                        <p:column headerText="#">
                            <h:outputText value="#{rowIndex+1}" />
                        </p:column>
                        <p:column headerText="Sereno">
                            <h:outputText value="#{list.sereno.nombre} #{list.sereno.apellido}" />
                        </p:column>
                        <p:column headerText="Can">
                            <h:outputText value="#{list.perro.nombre}" />
                        </p:column>
                        <p:column headerText="Desasignar" style="text-align: center;">
                            <p:commandButton icon="icon-delete" style="font-size: 12px;" update=":evento:selecc:asig, :evento:selecc:asig2"
                                             actionListener="#{eventoBean.eliminarSereno(list)}"/>
                        </p:column>
                    </p:dataTable>                              
                    <br/>
                    <br/>
                    <p:dataTable id="asig2" value="#{eventoBean.serenosperros}" var="list" paginator="true" rows="10" lazy="true" rowIndexVar="rowIndex"
                                 paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                                 emptyMessage="No hay serenos resgitrados" >
                        <p:column style="text-align: center;">
                            <f:facet name="header">
                                #
                            </f:facet>
                            <h:outputText value="#{rowIndex+1}" />
                        </p:column>
                        <p:column style="text-align: left;">
                            <f:facet name="header">
                                Sereno
                            </f:facet>
                            <h:outputText value="#{list.sereno.nombre} #{list.sereno.apellido}" />
                        </p:column>
                        <p:column style="text-align: left;">
                            <f:facet name="header">
                                Can
                            </f:facet>
                            <h:outputText value="#{list.perro.nombre}" />
                        </p:column>
                        <p:column style="text-align: center;">
                            <f:facet name="header">
                                Asignar
                            </f:facet>
                            <p:commandButton icon="icon-choice"  style="font-size: 12px;" update=":evento:selecc:asig"
                                             actionListener="#{eventoBean.seleccionarSereno(list)}"/>
                        </p:column>
                    </p:dataTable>
                </h:form>  
            </p:dialog>
            <p:dialog widgetVar="serenoDialog2" id="idSerenos2" header="Serenos Asignados" showEffect="clip"
                      hideEffect="clip" resizable="false" position="center">
                <p:dataTable id="asig3" value="#{eventoBean.serenosAsignados}" style="font-size: 13px;" var="list" 
                             emptyMessage="No hay asignacion" rowIndexVar="rowIndex">  
                    <p:column headerText="#">
                        <h:outputText value="#{rowIndex+1}" />
                    </p:column>
                    <p:column headerText="Sereno">
                        <h:outputText value="#{list.sereno.nombre} #{list.sereno.apellido}" />
                    </p:column>
                    <p:column headerText="Can">
                        <h:outputText value="#{list.perro.nombre}" />
                    </p:column>
                </p:dataTable>     
            </p:dialog>
            <p:dialog widgetVar="dialogEve" id="idEventF" showEffect="clip"
                      hideEffect="clip" resizable="false" position="center">
                <p:commandButton id="color" value="Agregar" actionListener="#{eventoBean.agregarFrecuente}"/>
                <p:panelGrid columns="2" id="gridEF">
                    <div class="form-group has-feedback">
                        <label for="nomF" class="col-sm-3 control-label">Nombre</label>
                        <div class="col-sm-5">
                            <p:inputText styleClass="form-control" id="nomF" value="#{eventoBean.eventoFrecuente.nombre}" maxlength="80"/>
                        </div>						
                    </div>
                    <div class="form-group has-feedback"> 
                        <label for="tipoF" class="col-sm-5 control-label" style="text-align: right;">Tipo</label>
                        <div class="col-sm-5">
                            <h:selectOneMenu id="tipoF" value="#{eventoBean.eventoFrecuente.idTipo}" styleClass="form-control">
                                <f:selectItem noSelectionOption="true" itemLabel="Seleccionar" itemValue="0" />
                                <f:selectItems value="#{eventoBean.lstTipoEventos}" var="list" itemLabel="#{list.descripcion}" itemValue="#{list.idTipoEvento}" />
                            </h:selectOneMenu>
                        </div>
                    </div>
                </p:panelGrid>
            </p:dialog >            
        </h:form>
        <p:dialog modal="true" maximizable="false" widgetVar="dlgEl" header="Eliminar Registro">
            <p>¿Desea eliminar el Evento?</p>
            <h:form id="frmEliminar">
                <p:commandButton value="Aceptar" actionListener="#{eventoBean.eliminarEvento}" 
                                 oncomplete="myschedule.update(); dlgEl.hide(); serenoDialog.hide(); eventDialog.hide();" />
                <p:commandButton value="Cancelar" oncomplete="dlgEl.hide();" />
            </h:form>
        </p:dialog>
    </ui:define>
</ui:composition>
